<!DOCTYPE html>
<html lang="{{.Conf.Lang}}" class="h-100">
<head>
    {{template "_head.html" .}}
    <link rel="stylesheet" href="{{.UrlPre}}/static/css/dracula.css">
    <title>{{.Blog.Meta.Title}} | {{.Conf.Title}}</title>
</head>
<body class="bg-body d-flex flex-column h-100">

{{template "_topbar.html" .}}

<main>
    <div class="container">
        <div class="row">

            {{if .Blog.Outline}}
            <div class="col-12 col-lg-auto order-lg-last ft-toc sticky-sidebar mt-1 ms-xxl-5 px-sm-1 text-body-secondary">
                <button class="btn btn-secondary d-lg-none collapsed ft-page-toc-toggle" type="button"
                        data-bs-toggle="collapse" data-bs-target="#ft-toc-nav" aria-expanded="false"
                        aria-controls="ft-toc-nav">
                    大纲
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                         class="bi bi-chevron-expand" viewBox="0 0 16 16">
                        <path fill-rule="evenodd"
                              d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708m0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708"></path>
                    </svg>
                </button>
                <strong class="d-none d-lg-block h6 my-2 ms-2">大纲</strong>
                <hr class="d-none d-lg-block my-2">
                <div class="collapse" id="ft-toc-nav">
                    <nav id="page-toc">
                        {{.Blog.Outline}}
                    </nav>
                </div>
            </div>
            {{end}}

            <div class="col ft-guide mt-3 px-lg-3 px-xl-5" data-bs-spy="scroll" data-bs-target="#page-toc"
                 data-bs-offset="0" tabindex="0">
                <h1 class="post-title">{{.Blog.Meta.Title}}</h1>

                <div class="post-body">
                    {{.Blog.Content}}
                <div>

            </div>

        </div>
    </div>
</main>

{{template "_footer.html" .}}

<script src="{{.UrlPre}}/static/js/bootstrap.min.js"></script>
<script src="{{.UrlPre}}/static/js/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<script>
    (() => {
        'use strict'

        document.getElementById('btn-sidebar').style.visibility = "hidden"
        const channels = document.getElementById('site-channels')
        channels.querySelectorAll(":scope a.nav-link").forEach(element => {
            element.classList.remove('active')
            if (element.getAttribute("href").endsWith("{{.Blog.Archive.Url}}")) {
                element.classList.add('active')
            }
        })
    })()
</script>
</body>
</html>
